import { FC } from 'react';
import { Table, TableData, useVM } from '@todo/ui';
import { RolesListTable } from './interface.ts';
import { observer } from 'mobx-react-lite';
import { RoleListViewModel } from '../../viewmodels/role.list.vm.ts';
import Box from '@mui/joy/Box';
import { useTranslation } from 'react-i18next';
import { RoleItemViewModel } from '../../viewmodels/role.item.vm.ts';
import RolesDetailDrawer from './components/RolesDetailDrawer.tsx';

const UserRolesPage: FC = () => {
  const vm = useVM<RoleListViewModel>(RoleListViewModel);
  const vmItem = useVM<RoleItemViewModel>(RoleItemViewModel);
  const { t } = useTranslation('user');

  const domeData: TableData<RolesListTable> = {
    headers: {
      isActive: {
        label: t('roles.table.active'),
        width: '10%',
      },
      name: {
        label: t('roles.table.name'),
        width: '20%',
      },
      type: {
        label: t('roles.table.type'),
        width: '20%',
      },
      description: {
        label: t('roles.table.description'),
        width: '50%',
      },
    },
    data: vm.roles,
  };

  return (
    <Box>
      <Table
        data={domeData}
        loading={vm.loading}
        // rowsPerPage={10}
        // currentPage={1}
        detailPageComponent={<RolesDetailDrawer />}
        onOpenDetail={async (id) => {
          await vmItem.initialize(id);
        }}
        onCloseDetail={() => vmItem.dispose()}
      />
    </Box>
  );
};

export default observer(UserRolesPage);
